<template>
  <div class="contentmain boldfont">

    <el-row>
      <el-col :span="24" class="cec1">

        <el-row>
          <el-col :span="24" class="titles titlefs">
            今日 营业收入
            <el-radio-group v-model="radio" style="margin-left:20px;" @change="changelist">
              <el-radio-button label="总"></el-radio-button>
              <el-radio-button label="微信商城"></el-radio-button>
              <el-radio-button label="小程序"></el-radio-button>
              <el-radio-button label="线下"></el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>

        <Count type="today" v-if="t1" />
        <MicroMall type="today" v-if="t2" />
        <MiniProgram type="today" v-if="t3" />
        <Offline type="today" v-if="t4" />


      </el-col>
    </el-row>
    <!-- 今日 -->

    <el-row>
      <el-col :span="24" class="cec1 mgt">
        
        <el-row>
          <el-col :span="24" class="titles titlefs">
            历史 营业收入
            <el-radio-group v-model="radio1" style="margin-left:20px;" @change="changelists">
              <el-radio-button label="近7日"></el-radio-button>
              <el-radio-button label="近30日"></el-radio-button>
              <el-radio-button label="自定义"></el-radio-button><!--@click="customday"-->
            </el-radio-group>

            <el-date-picker
            v-if="datapicker"
            @change="logTimeChange"
      v-model="value1"
      type="datetimerange"
      align="right"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-row>

        <Count type="history" v-if="t1" />
        <MicroMall type="history" v-if="t2" />
        <MiniProgram type="history" v-if="t3" />
        <Offline type="history" v-if="t4" />

      </el-col>
    </el-row>
    <!-- 历史 -->

  </div>
</template>
<script>
import moment from 'moment'
import lockr from 'lockr'
import Count from 'components/Home/Count'
import MicroMall from 'components/Home/MicroMall'
import MiniProgram from 'components/Home/MiniProgram'
import Offline from 'components/Home/Offline'
import echarts from 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import { parseExpression } from 'babylon';
    export default{
      data(){
        return{
           pickerOptions1: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            }
           },
          value1:"",
          datapicker:false,
          today:{},
          history:{},
          showtoday:false,
          radio:'总',
          radio1:'近7日',
          t1:true,
          t2:false,
          t3:false,
          t4:false
        }
      },
      components:{
        Count,MicroMall,MiniProgram,Offline
      },
      computed:{
        shopid(){
          return this.$store.state.TOPshopID  
        }
      },
      watch: {
          shopid(v){
            if(this.$store.state.shiro==true){
             
            }
          }
      },
      created(){
        
      },
      mounted(){

      },
      methods:{
        changelist(v){
          switch (v) {
            case '总':
              this.t1=true
              this.t2=false
              this.t3=false
              this.t4=false
              break;
            case '微信商城':
              this.t1=false
              this.t2=true
              this.t3=false
              this.t4=false
              break;
            case '小程序':
              this.t1=false
              this.t2=false
              this.t3=true
              this.t4=false
              break;
            case '线下':
              this.t1=false
              this.t2=false
              this.t3=false
              this.t4=true
              break;
          }
        },
        changelists(v){
          var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
          switch (v) {
            case '近7日':
              this.$store.state.sethometime=false
              this.datapicker=false
              var sevendays=new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 7
              var std=moment(sevendays).format("YYYY-MM-DD HH:mm:ss");
              this.$store.state.hometime=[]
              this.$store.state.hometime.push(std,now)
              break;
            case '近30日':
              this.$store.state.sethometime=false
              this.datapicker=false
              var tsty=new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 30
              var std=moment(tsty).format("YYYY-MM-DD HH:mm:ss");
              this.$store.state.hometime=[]
              this.$store.state.hometime.push(std,now)
              break;
            case '自定义':
              this.$store.state.sethometime=true
              this.datapicker=true
              break;
          }
        },
        customday(){
          this.datapicker=true
        },
        logTimeChange(val){
          // console.log(val)
          // var o=val+' '+'00:00:00'
          // var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
          this.$store.state.hometime=[]
          this.$store.state.hometime=[].concat([moment(val[0]).format("YYYY-MM-DD HH:mm:ss"),moment(val[1]).format("YYYY-MM-DD HH:mm:ss")])
        }
      }
    }
</script>
<style>
  .cec1{
    border: 1px solid #d1dbe5;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    border-radius: 5px;
  }
  .mgt{
    margin-top: 30px;
  }
  .titles{
    margin: 20px;
  }
  .titlefs{
    font-size: 16px;
  }
  .money{
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
  }
  .borderleft{
    border-left: 1px solid #EEEEEE;
  }
  .contentmain{
    padding: 20px;    
}

.ddt{
  display: inline-block;
}
</style>
<style scoped>
.boldfont{
  font-weight: bold;
  color:#333;
}
.hblk{
  display: inline-block;
  width: 7px;
  height: 21px;
  background-color: #e8e8e8;
  margin-right: 10px;
  margin-bottom: -4px;
}
.btnmg{
  margin-top:80px;
}
.dataset{
  width: 60%;
  margin:0 auto;
  height: 300px;
}
</style>
